<template>
	<view class="wrap">
		<view class="header">
			<view class="userinfo">
				<view class="info11">
					<image v-if="vuex_avatar8" :src="vuex_avatar8" mode=""></image>
					<image v-else src="../../static/images/photo.png" mode=""></image>
					
					<view class="namesBox">
						<view class="name">
							{{ vuex_nickname8 || '未登录,请登录' }}
						</view>
					</view>
				</view>
			</view>
		<view class="difBg">
			<view class="infoBox">
				<view class="infopad">
					<!-- <view class="names">
						<image :src="vuex_avatar8" mode=""></image>
						<view class="real">
							{{ vuex_nickname8 || '0000' }}
						</view>
					</view> -->
					<view class="info">
						<view @click="cash" class="itembor">
							<view> {{ vuex_availableRedPacketAmt8 ||0 }}
							<text>元</text>
							</view>
							<view>查看全部提现
							<!-- <u-icon style="margin-left: 4px;" color="#fff" size="24" name="arrow-right">
								</u-icon> -->
							</view>
						</view>
						<view @click="RebateAmt">
							<view> {{ vuex_availableRebateAmt8 ||0 }}<text>元</text></view>
							<view>查看佣金余额
							<!-- <u-icon style="margin-left: 4px;" color="#fff" size="24" name="arrow-right">
								</u-icon> -->
							</view>
						</view>
					</view>
					<view   @click="clickImg"class="btns">
						<image style="width: 45rpx; height: 45rpx; margin-right: 24rpx;" src="../../static/images/wx1.png" mode=""></image>
						立即微信提现
					</view>
					<!-- <image @click="clickImg" class="btns" src="../../static/images/7.png" mode=""></image> -->
				</view>
			</view>
			
			<view  class="ul">
				<view @click="navTo('/pages/mine/popularize')" class="li">
					<view>
						<image class="icon" src="../../static/images/11.png" mode=""></image>
						已推广人数
					</view>
					<u-icon color="rgba(255, 255, 255, 0.50)" size="28" name="arrow-right"></u-icon>
				</view>
				<view @click="navTo('/pages/mine/rebates')" class="li">
					<view>
						<image class="icon" src="../../static/images/12.png" mode=""></image>
						返佣记录
					</view>
					<u-icon color="rgba(255, 255, 255, 0.50)" size="28" name="arrow-right"></u-icon>
				</view>
				<view @click="navTo('/pages/mine/cash')" class="li">
					<view>
						<image class="icon" src="../../static/images/14.png" mode=""></image>
						提现记录
					</view>
					<u-icon color="rgba(255, 255, 255, 0.50)" size="28" name="arrow-right"></u-icon>
				</view>
			
				<!--  @click="money" -->
				<view @click="navTo('/pages/mine/share')" class="li">
					<view>
						<image class="icon" src="../../static/images/13.png" mode=""></image>
						我要赚钱
					</view>
					<u-icon color="rgba(255, 255, 255, 0.50)" size="28" name="arrow-right"></u-icon>
				</view>
			</view>
			
			
		</view>
		</view>
		<!-- 二维码弹框 -->

		<u-popup z-index="888" :mask-close-able="false" width="80%" mode="center" v-model="show">
			<view class="content">
				<view class="img">
					<image @click="show = false" class="close" src="../../static/images/close.png" mode=""></image>
				</view>
				<view class="title">
					请您确认打款账户信息
				</view>
				<view class="main">
					<view class="subtit">
						<image class="wx" src="../../static/images/wx.png" mode=""></image>
						打款金额
					</view>
					<view class="money">
						<text>￥</text>
						{{vuex_availableRedPacketAmt8 }}
					</view>
					<view class="desc">
						<view class="">
							打款账户
						</view>
						<view class="line">
							<image :src="vuex_avatar8" mode=""></image>
							<view class="real">
								{{ vuex_nickname8 }}
							</view>
						</view>
					</view>
					<view class="desc">
						<view class="">
							打款方式
						</view>
						<view style="color: #3ec068;">
							微信零钱
						</view>
					</view>
					<view class="desc">
						<u-input :password-icon="false" :clearable="false" :border="true" placeholder="请输入微信密码 "
							border-color="#f5f1ed" v-model="psw" type="password" />

					</view>
					<view class="tips">
						请输入微信登录密码验证您的身份提现
					</view>
					<view @click="sure" class="btn">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				psw: '',
				show: false,
				rules: '',
				selectteamList: [],
				member: {},
				iconSize: 38,
				imgList: [{
					image: 'https://mk001.oss-cn-hangzhou.aliyuncs.com/icon/jifen.png'
				}],
			};
		},

		onShow() {

		},
		methods: {
			sure() {
					console.log(this.vuex_availableRedPacketAmt8, 7777777777777);
					if (!this.psw) {
						uni.showToast({
							title: '请输入微信密码!',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'none',
							//显示持续时间为 2秒
							duration: 2000
						})

						return
					}

					let that = this;

					that.$u.api
						.pass({
							userid: this.vuex_openId8,
							input: this.psw
						})
						.then((res) => {
							

							if (res.code == 0) {
								uni.showModal({
									title: '提示',
									confirmColor: '#FF8616',
									content: '是否提取全部红包余额到微信零钱？',
									success: function(res) {
										if (res.confirm) {

											that.$u.api
												.extractToMoney({
													amt: that.vuex_availableRedPacketAmt8 || 0,
													type: 1
												})
												.then((res) => {
													

													if (res.code === 200) {
														
														that.show = false
														
														uni.showToast({
															title: '提现成功',
															//将值设置为 success 或者直接不用写icon这个参数
															icon: 'none',
															//显示持续时间为 2秒
															duration: 2000
														})
														that.$u.vuex("vuex_availableRedPacketAmt8",
														0); //红包余额
													} else {
														// that.show = false
														uni.showToast({
															title: res.msg,
															//将值设置为 success 或者直接不用写icon这个参数
															icon: 'none',
															//显示持续时间为 2秒
															duration: 2000
														})
													}

												});

										} else {
											// 执行取消后的操作
										}
									}
								})

							} else {


								uni.showToast({
									title: res.msg,
									//将值设置为 success 或者直接不用写icon这个参数
									icon: 'none',
									//显示持续时间为 2秒
									duration: 2000
								})


								if (res.code == -2) {

									setTimeout(() => {
										uni.reLaunch({
											url: "/pages/tabbar/index?tab=0"
										})
									}, 2000)

								}
							}
						});


				
			},
			
			clickImg(){
				
				
				
				// 如果有红包时优先提现红包，只有佣金时，点击该按钮也能提拥金。
				if (this.vuex_availableRedPacketAmt8) {
					
					let that = this
					
					that.$u.api
						.sign()
						.then((res) => {
							if (res.code == 0) {
								
									uni.showModal({
										title: '提示',
										confirmColor: '#FF8616',
										content: '是否提取全部红包余额到微信零钱？',
										success: function(res) {
											if (res.confirm) {
								
												that.$u.api
													.extractToMoney({
														amt: that.vuex_availableRedPacketAmt8 || 0,
														type: 1
													})
													.then((res) => {
														
								
														if (res.code === 200) {
															
															that.show = false
															
															uni.showToast({
																title: '提现成功',
																//将值设置为 success 或者直接不用写icon这个参数
																icon: 'none',
																//显示持续时间为 2秒
																duration: 2000
															})
															that.$u.vuex("vuex_availableRedPacketAmt8",
															0); //红包余额
														} else {
															// that.show = false
															uni.showToast({
																title: res.msg,
																//将值设置为 success 或者直接不用写icon这个参数
																icon: 'none',
																//显示持续时间为 2秒
																duration: 2000
															})
														}
								
													});
								
											} else {
												// 执行取消后的操作
											}
										}
									})
								
								
							}else{
								this.show = true
							}
						});
					
					
					
				} else {
					this.RebateAmt()
				}
			},

			cash() {
				// this.show = true //记得删掉

				if (this.vuex_availableRedPacketAmt8 <= 0) {
					uni.showToast({
						title: '余额不足，提现失败!',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})

					return
				}

				this.show = true
			},
			RebateAmt() {


				if (this.vuex_availableRebateAmt8 <= 0) {
					uni.showToast({
						title: '余额不足，提现失败!',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
					return
				}

				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否提取全部佣金余额到微信零钱？',
					confirmColor: '#FF8616',
					success: function(res) {
						if (res.confirm) {

							that.$u.api
								.extractToMoney({
									amt: that.vuex_availableRebateAmt8,
									type: 2
								})
								.then((res) => {

									if (res.code === 200) {

										this.show = false
										uni.showToast({
											title: '提现成功',
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'none',
											//显示持续时间为 2秒
											duration: 2000
										})
										that.$u.vuex("vuex_availableRebateAmt8", 0); //红包余额
									} else {
										uni.showToast({
											title: res.msg,
											//将值设置为 success 或者直接不用写icon这个参数
											icon: 'none',
											//显示持续时间为 2秒
											duration: 2000
										})
									}

								});

						} else {
							// 执行取消后的操作
						}
					}
				})


			},
			money() {
				this.$emit('send', 1)
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	};
</script>

<style>
	.difBg{
		padding: 0 24rpx;
	}
	page{
		background: linear-gradient(180deg, #ED2933 0%, #ED2933 30%, #FFE4BC 77%);
	}
</style>
<style lang="scss" scoped>
	@import './index.scss';

	/deep/ .u-mode-center-box {
		background: none;
	}

	.tips {
		color: #cccccc;
		padding: 0 15px;
		font-size: 12px;
	}

	.content {
		width: 100%;
		color: #fff;

		.img {
			display: flex;
			justify-content: flex-end;

			.close {
				width: 26px;
				height: 26px;
				text-align: right;
			}
		}

		.title {
			text-align: center;
			padding: 0 0 18px 0;
			font-weight: bold;
			font-size: 17px;
		}

		.main {
			background: #fff;
			width: 90%;
			margin: 0 auto;
			padding-bottom: 30px;
			// height: 100px;
			border-radius: 5px;

			.desc {
				padding: 0 15px;
				margin-bottom: 10px;
				font-size: 13px;
				color: #626262;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					margin-right: 5px;
				}

				.line {
					display: flex;
					align-items: center;
				}
			}

			.btn {
				margin: 20px 15px 0;
				border-radius: 5px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #3ec068;
			}

			.subtit {
				color: #3ec068;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 25px 0 10px 0;
				font-size: 13px;

				.wx {
					width: 15px;
					height: 15px;
					margin-right: 5px;
					margin-top: 2px;
				}
			}

			.money {
				font-size: 40px;
				padding-bottom: 40px;
				font-weight: bold;
				color: #262626;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 20px;
					padding-right: 5px;
				}
			}
		}

	}

	// page {
	// 	background: #241803;
	// }
</style>
